<template>
    <view class="me">
        <view v-if="imgUrl()" class="me-bg" :style="{ backgroundImage: 'url(' + imgUrl() + 'user-bg.png' + ')' }">
            <view class="search_top_back" style="height: 88rpx">
                <view class="search_top_nav">
                    <view :style="{ height: statusBarHeight }" class="status_bar"></view>
                </view>
            </view>
            <!-- #ifndef MP-WEIXIN -->
            <view style="height: 88rpx"></view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <view style="height: 88rpx"></view>
            <!-- #endif -->
            <!-- userDetail.avatar ? : "" -->
            <navigator @click="goToHomePage" hover-class="none" class="me-top">
                <view class="me-icon">
                    <view
                        class="me-icon_image"
                        :style="{ backgroundImage: 'url(' + userDetail.avatar + ')' }"
                        v-if="userDetail.avatar"
                    >
                        <image style="border-radius: 50%; width: 124rpx; height: 124rpx" :src="userDetail.avatar">
                        </image>
                    </view>

                    <view class="me-icon_image" v-else>
                        <image
                            style="border-radius: 50%; width: 124rpx; height: 124rpx"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/default_head.png"
                        ></image>
                    </view>
                </view>
                <view style="max-width: calc(100% - 240rpx)" class="me-title">
                    <view class="me-name">{{ userDetail.nickname ? userDetail.nickname : "微信登录/注册" }}</view>
                    <view v-if="!!userDetail.gradeName" @click.stop="goToGrade" class="me-grade">{{userDetail.gradeName}}</view>

                    <view
                        v-else-if="userDetail.phone == '' && userDetail.nickname != ''"
                        style="font-size: 24rpx; color: #666666"
                        >手机号授权></view
                    >
                </view>
            </navigator>

            <navigator
                :url="'/packageMine/pages/integral/integral?score=' + Score.score"
                hover-class="none"
                class="me-look"
            >
                <view class="melook-left">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/jifen-icon.png" mode=""></image>
                    <text style="color: #fff">{{ Score.score }}</text>
                    <view style="margin-top: 20rpx">积分</view>
                </view>
                <view class="melook-right">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user-llok.png" mode=""></image>
                </view>
            </navigator>

            <navigator url="/packageStaff/pages/staff/index" class="staff" v-if="userDetail.employee !== 0">
                <image src="https://admin.ximusen.cn/profile/upload/ximusen_mini_app_img/yuangongquanyi.png" />
            </navigator>
            <view class="me-main">
                <view @click="goToMyMedal" class="me-item">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user1.png" mode=""></image>
                    <text>我的勋章</text>
                </view>
                <view @click="authJump('/packageOrder/pages/orderlist/orderlist')" class="me-item" hover-class="none">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user2.png" mode=""></image>
                    <text>我的订单</text>
                </view>
                <view @click="authJump('/packageMall/pages/address/addressList')" hover-class="none" class="me-item">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user3.png" mode=""></image>
                    <text>收货地址</text>
                </view>
                <view @click="goToFav" class="me-item">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user4.png" mode=""></image>
                    <text>我的收藏</text>
                </view>
                <view @click="goToMyStorys" class="me-item">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user5.png" mode=""></image>
                    <text>我的故事</text>
                </view>
                <view @click="goToWeightChange" class="me-item">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user6.png" mode=""></image>
                    <text>体重变化</text>
                </view>
                <view @click="authJump('/packageHome/pages/physique/physique')" hover-class="none" class="me-item">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user7.png" mode=""></image>
                    <text>形体测评</text>
                </view>
                <view class="me-item" @click="goToRecords" >
<!--                    <image src="../../static/img/wo/user8.png" mode=""></image>-->
<!--                    <text>测量记录</text>-->
                </view>
            </view>
        </view>

        <view class="me-main1">
            <view @click="goToMyCoupon" class="me-item1">
                <view class="itemData">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user-coupon.png" mode=""></image>
                    <text>我的优惠券</text>
                </view>
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" mode="" class="arrorRight"></image>
            </view>
            <view @click="goToInvite" class="me-item1">
                <view class="itemData">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user-share.png" mode=""></image>
                    <text>分享有礼</text>
                </view>
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" mode="" class="arrorRight"></image>
            </view>
            <view @click="goToBodyBalance" class="me-item1">
                <view class="itemData">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user9.png" mode=""></image>
                    <text>倾小体</text>
                </view>
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" mode="" class="arrorRight"></image>
            </view>
            <view @click="goToStatistics" class="me-item1">
                <view class="itemData">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user10.png" mode=""></image>
                    <text>数据统计</text>
                </view>
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" mode="" class="arrorRight"></image>
            </view>
            <view
                v-if="userDetail.belongEmpId && userDetail.belongStoreId"
                @click="goToRecommendCookBook"
                class="me-item1"
            >
                <view class="itemData">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user11.png" mode=""></image>
                    <text>顾问推荐食谱</text>
                </view>
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" mode="" class="arrorRight"></image>
            </view>
            <!-- -->
            <view
                @click="goToServiceEvaluatee"
                class="me-item1"
                v-if="userDetail.belongEmpId && userDetail.belongStoreId"
            >
                <view class="itemData">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user12.png" mode=""></image>
                    <text>服务评价</text>
                </view>
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" mode="" class="arrorRight"></image>
            </view>
            <view style="position: relative" class="me-item1">
                <view class="itemData">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/user13.png" mode=""></image>
                    <text>联系客服</text>
                    <button class="wxBtn" open-type="contact"></button>
                </view>
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" mode="" class="arrorRight"></image>
            </view>

		   <!-- <view @click="goToStaff" class="me-item1">
			   <view class="itemData">
				   <image src="../../static/img/wo/staff.png" mode=""></image>
				   <text>员工权益</text>
			   </view>
			   <image src="../../static/img/wo/arrow-right.png" mode="" class="arrorRight"></image>
		   </view> -->
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
export default {
    data() {
        return {
            statusBarHeight: statusBarHeight,
            userDetail: {},
            Score: "",
        };
    },
    computed: {
        ...mapState(["isLogin", "userInfo"]),
    },
    onShow() {
        if (this.isLogin) {
            this.getScore();
            this.requestUser();
        }
    },
    methods: {
        ...mapMutations(["loginSaveUserInfo", "logout"]),
        imgUrl() {
            return this.request.appImageBaseUrl;
        },
        requestUser() {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/get/${this.userInfo.uid}`, null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        this.userDetail = res.data;
                        this.loginSaveUserInfo(res.data);
                    }
                });
        },
        authJump(url) {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url,
            });
        },
        goToHomePage() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/homepage/homepage",
            });
        },
        goToGrade() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/grade/gradeDetail",
            });
        },
        isAuthNicknamePhone() {
            if (this.userInfo.nickname == "" || this.userInfo.nickname == null || this.userInfo.nickname == undefined) {
                this.authUserInfo();
                return false;
            }
            if (this.userInfo.phone == "" || this.userInfo.phone == null || this.userInfo.phone == undefined) {
                uni.navigateTo({
                    url: "/pages/login/login",
                });
                return false;
            }
            return true;
        },
        authUserInfo() {
            uni.getUserProfile({
                desc: "Wexin",
                success: (res) => {
                    let avatar = res.userInfo.avatarUrl;
                    let nickname = res.userInfo.nickName;
                    this.sendUserInfo(avatar, nickname);
                },
                fail(err){
                    uni.showToast({
                        title: err.errMsg,
                        icon: 'none'
                    })
                }
            });
        },
        sendUserInfo(avatar, nickname) {
            var postData = {};
            postData.uid = this.userInfo.uid;
            postData.avatar = avatar;
            postData.nickname = nickname;
            this.request.httpTokenJsonRequest("/mp-api/wx/user/update", postData, "POST", false).then((res) => {
                if (res.code == 0) {
                    if (res.data.phone == "" || res.data.phone == null || res.data.phone == undefined) {
                        uni.navigateTo({
                            url: "/pages/login/login",
                        });
                    }
                    this.requestUser();
                }
            });
        },
        getScore() {
            this.request.httpTokenJsonRequest("/mp-api/wx/my/score", null, "POST", false).then((res) => {
                if (res.code != 0) {
                    this.helper.showToast(res.message);
                    return;
                }
                const data = res.data;
                this.Score = {
                    score: data.score,
                };
            });
        },
        goToMyStorys() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/mystorys/mystorys",
            });
        },
        goToMyMedal() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/myMedal/myMedal",
            });
        },
        goToRecords() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/measureRecords/measureRecords",
            });
        },
        goToFav() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/myFav/myFav",
            });
        },
        goToServiceEvaluatee() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/serviceEvaluatee/serviceEvaluatee",
            });
        },
        goToBodyBalance() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            if (this.userDetail.completeStatus == 1) {
                uni.navigateTo({
                    url: "/packageMine/pages/bodyFatBalance/bodyFatBalance",
                });
            } else {
                uni.navigateTo({
                    url: "/packageMine/pages/userinfo/userinfo",
                });
            }
        },
        goToInvite() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/invite/index",
            });
        },
        goToStatistics() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/weightStatistics/weightStatistics",
            });
        },
        goToRecommendCookBook() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/recommendCookBook/recommendCookBook",
            });
        },
        goToWeightChange() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/weightChange/weightChange",
            });
        },
        goToMyCoupon() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "/packageMine/pages/couponList/index",
            });
        },
        goToStaff() {
            uni.navigateTo({
                url: "/packageStaff/pages/staff/index",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
body,
.me {
    height: 100%;
    min-height: 100vh;
    background-position: center;
    background-color: #f7fdfc;
}

uni-page-body,
html {
    height: 100%;
    background-color: #f7fdfc;
}

.wxBtn {
    background-color: transparent;
    height: 124rpx;
    flex: 1;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
}

button::after {
    border: none;
}

.me-item1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .itemData {
        display: flex;
        align-items: center;
    }

    .arrorRight {
        width: 32rpx;
        height: 32rpx;
        margin: 0;
    }
}

.staff {
    position: absolute;
    top: 98px;
    right: 0;
    image {
        width: 88px;
        height: 32px;
    }
}
</style>
